<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input v-model="searchForm.commodityName" placeholder="商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品类型">
          <el-select v-model="searchForm.commodityType" placeholder="商品类型">
            <el-option label="文体用品" value="1"></el-option>
            <el-option label="食品" value="2"></el-option>
            <el-option label="饮料" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getCommodityList">查询</el-button>
          <el-button type="primary" @click="resetForm">重置</el-button>
          <el-button type="primary" @click="addCommodity">新增</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card" style="height: 70vh;overflow-y: scroll;">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="commodityName" label="商品名称" width="180">
        </el-table-column>
        <!-- <el-table-column prop="imgPath" label="活动图片" width="180">
          <template slot-scope="scope">
            <img class="itemImg2" :src="IMGPATH + scope.row.imgPath" alt="" />
          </template>
        </el-table-column> -->
        <el-table-column prop="price" label="商品价格" width="120">
        </el-table-column>
        <el-table-column prop="inventory" label="商品库存" width="120">
        </el-table-column>
        <el-table-column prop="commodityType" label="商品类型">
          <template slot-scope="scope">
            <div>{{ commodityTypeArr[scope.row.commodityType] }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="recFlag" label="操作" width="380">
          <template slot-scope="scope">
            <el-button type="primary" @click="goToDetail(scope.row.id)">详情</el-button>
            <el-button type="primary" @click="editCommodity(scope.row)">编辑</el-button>
            <el-button type="primary" @click="deleteCommodity(scope.row.id)">删除</el-button>
            <el-upload
              style="display: inline; margin-left: 10px"
              class="avatar-uploader"
              :show-file-list="false"
              :action="BASEURL + '/commodity/uploadPic'"
              :data="{'commodityId': scope.row.id}"
              :on-success="handleSu"
            > 
              <el-button type="primary">上传图片</el-button>
            </el-upload>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <el-dialog title="新建商品" :visible.sync="editView">
      <el-form ref="form" class="newForm" :model="commodityForm" label-width="130px">
        <el-form-item label="商品名称">
          <el-input v-model="commodityForm.commodityName"></el-input>
        </el-form-item>
        <el-form-item label="商品类型">
          <el-select v-model="commodityForm.commodityType" placeholder="商品类型">
            <el-option label="文体用品" value="1"></el-option>
            <el-option label="食品" value="2"></el-option>
            <el-option label="饮料" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input-number v-model="commodityForm.price"></el-input-number>
        </el-form-item>
        <el-form-item label="商品库存">
          <el-input-number v-model="commodityForm.inventory"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="商品详情" :visible.sync="showcommodityDetail">
      <div class="cDetail">商品名称： {{ commodityDetail.commodityName }}</div>
      <div  class="cDetail">商品类型: {{ commodityTypeArr[commodityDetail.commodityType] }}</div>
      <div  class="cDetail">商品价格： {{ commodityDetail.price }}</div>
      <div  class="cDetail">商品库存: {{ commodityDetail.inventory }}</div>
      <div  class="cDetail">商品图片: </div>
      <div><img class="itemImg" :src="IMGPATH + commodityDetail.imgPath" alt="" /></div>

    </el-dialog>

  </div>
</template>

<script>
import api from "../network/home";

export default {
  data() {
    return {
      searchForm: {},
      tableData: [],
      editView:false,
      commodityForm:{},
      commodityDetail: {},
      showcommodityDetail: false,
      commodityTypeArr: ['未知', '文体用品', '食品', '饮料']
    };
  },
  computed: {},
  methods: {
    handleSu(){
      this.$message.success('上传成功')
      this.getCommodityList()
    },
    getCommodityList(){
      const { commodityName, commodityType } = this.searchForm;
      const params = {
        pageNum: 1,
        pageSize: 10,
        commodityName,
        commodityType
      };
      api.getCommodityList(params).then((res) => {
        this.tableData = res.data.data.records;
      });
    },
    resetForm(){
      this.searchForm = {}
    },
    addCommodity(){
      this.editView = true
      // api.addCommodity()
    },
    editCommodity(row){
      this.editView = true
      this.commodityForm = row
    },
    
    onSubmit(){
      const { commodityName, inventory, price, commodityType, id } = this.commodityForm;
      const params = {
        commodityName, inventory, price, commodityType,
        ...(id ? { id } : {})
      };
      if (id){
        api.updataCommodity(params).then(() => {
          this.editView = false
          this.getCommodityList()
        });
      } else {
        api.addCommodity(params).then(() => {
          this.editView = false
          this.getCommodityList()
        });
      }
      
    },
    cancel(){
      this.editView = false
    },
    goToDetail(id){
      api.commodityDetail(id).then((res) => {
        this.showcommodityDetail = true
        this.commodityDetail = res.data.data || {
        }
      });
    },
    deleteCommodity(id){
      api.deleteCommodity({id}).then(() => {
       this.getCommodityList()
      });
    }
  },
  mounted(){
    this.getCommodityList()
  }
};
</script>

<style lang="scss" scoped>
.box-card{
  margin: 20px;
}
.itemImg2 {
  width: 120px;
  height: 70px;
  object-fit: cover
}
.itemImg{
  width: 200px;
  object-fit: cover;
  height: 200px;
  margin-left: 50px;
}
.cDetail{
  height: 50px;
  font-size: 20px;
  margin-left: 50px;
}
// .newForm{
//   position: fixed;
//   top: 50%;
//   left: 50%;
//   transform: translate(-50%, -50%);
//   z-index: 1;
//   background-color: #fff;
// }
</style>